安安～歡迎來到「30天前端設計之旅」的DAY 12！今天將聚焦於網頁設計中的基本建構單元——區塊。通過理解區塊的概念，並掌握框線屬性和框線間距，能夠創建出具備層次感和視覺邊界的網頁布局。這些技巧將使設計更加專業且具有條理性。

區塊的概念：打造網頁的骨架
在網頁設計中，區塊（Block）是指頁面中的一個內容區域或元素，它通常佔據整個父容器的寬度並在垂直方向排列。區塊元素（如 div、section、header 等）構成了頁面的基本結構，就像建築中的磚塊一樣，將內容分割成可管理的區域。

D-12的學習目標：

1. 區塊的概念與應用（Block Elements）：
   • 區塊元素的特性：了解區塊元素和行內元素的區別。區塊元素通常在頁面中佔據整行，並在其前後自動插入換行符號，而行內元素（如 span、a）則不會影響頁面的行間排列。
   • 區塊布局的實踐：使用 div 等區塊元素來組織頁面結構，並通過應用不同的樣式使頁面更具層次感和可讀性。使用區塊元素來包裹內容，創建頁眉、側邊欄、主內容區等區域，並進行獨立設計。
2. 框線屬性（Border Properties）：
   • 基本框線設置：通過 border 屬性為區塊設置邊框，包括邊框的寬度（如 1px）、樣式（如 solid、dashed、dotted）和顏色（如 #000）。例如：border: 1px solid black; 會為元素添加一條黑色實線邊框。
   • 單邊框線設置：分別設定元素的四邊邊框，例如 border-top、border-right、border-bottom 和 border-left，可以只為特定邊添加邊框，創造出不同的效果。
   • 圓角邊框（Border Radius）：使用 border-radius 屬性創建圓角邊框，這可以使元素看起來更加柔和和現代化。例如：border-radius: 10px; 會將邊框的四個角變為圓角。
3. 框線間距（Padding & Margin）：
   • 內間距（Padding）：使用 padding 屬性設置內容與框線之間的內間距，使內容不緊貼邊框，提升可讀性。可以為四邊設置相同的內間距（如 padding: 10px;），或分別設置不同的內間距（如 padding: 10px 20px 30px 40px; 對應上、右、下、左）。
   • 外間距（Margin）：使用 margin 屬性設置區塊元素與其他元素之間的外間距，這有助於控制元素之間的距離，使頁面看起來不擁擠。你可以使用 margin: auto; 來讓區塊元素水平居中，或使用負值來讓元素重疊。
     內外間距的結合：結合使用內間距和外間距，來達到理想的布局效果，並避免元素之間的重疊或間距不足。

區塊、框線與間距是打造出色網頁布局的基石，運用這些技術，讓網頁結構更加井然有序吧！🧱📐